<template>
    <div class="song-list-box">
        <div class="base" v-show="tracks.length !== 0">
            <div class="left-box">
                <div class="list-box">
                    <div class="list-img">
                        <img :src="coverImgUrl"
                             alt="">
                    </div>
                    <div class="list-info">
                        <div class="info-t">
                            <span class="list-style">歌单</span>
                            <span class="list-name">{{ listName }}</span>
                        </div>
                        <div class="info-m">
                            <div class="flex">
                                <n-image width="40"
                                         :src="avatarUrl">
                                </n-image>
                                <span class="artist-name" @click="getRouterToUserHome(creatorId)">{{ nickname }}</span>
                                <n-image width="13" height="13"
                                         :src="identityIconUrl" class="flex items-center justify-center">
                                </n-image>
                                <span class="data-create">创建日期</span>
                                <span class="data-create">{{ createTime }}</span>
                            </div>
                            <play-icon :list-song="tracks.slice(0, tracksMaxLenght)" :is-one="false"
                                       :comment-count="commentCount" :share-count="shareCount"></play-icon>
                        </div>
                        <div class="info-b">
                            <div class="list-label">
                                <p class="flex justify-center items-center">标签:</p>
                                <div class="label-item">
                                    <div v-for="(item, index) in tags" :key="index">
                                        <LabelItem :label-name="item"
                                                   @click="getRouterToPlayListByCategory(item)"></LabelItem>
                                    </div>
                                </div>
                            </div>
                            <div class="introduce-box">
                                <p>介绍:</p>
                                <p v-for="(item, index) in description" :key="index">{{ item }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mx-16">
                    <song-list-detail :id="id.toString()" :track-count="trackCount" :play-count="playCount"
                                      :tracks="tracks.slice(0, tracksMaxLenght)"></song-list-detail>
                    <p class="flex justify-center items-center mt-8"> 如需显示更多请下载客户端</p>
                </div>
                <div class="m-16">
                    <comment-on :comment-count="commentCount" :comment-type=2 :id=id></comment-on>
                </div>
            </div>
            <div class="right-box">
                <div class="rb-top">
                    <song-fan-list title="喜欢这个歌单的人" :fan-list="subscribers"></song-fan-list>
                </div>
                <div class="rb-content">
                    <p class="font-bold border-b pb-1 border-gray-400">热门歌单</p>
                    <div class="flex mt-2" v-for="(item, index) in relatedPlayList" :key="index">
                        <div class="w-12">
                            <n-image :src="item.coverImgUrl" object-fit="contain"></n-image>
                        </div>
                        <div class="ml-2">
                            <p class="text-base cursor-pointer hover:underline" :title="item.name"
                               @click="getListDetail(item.id)">{{ calString(item.name, 10) }}</p>
                            <div class="flex text-gray-400">
                                <p>by</p>
                                <p class="ml-2 cursor-pointer hover:underline" :title="item.creator.nickname">
                                    {{ calString(item.creator.nickname, 10) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CommentOn from "@/components/comment/CommentOn";
import PlayIcon from "@/components/PlayIcon";
import {NImage, useNotification} from 'naive-ui';
import LabelItem from "@/components/LabelItem";
import {onMounted, reactive, toRefs} from "vue";
import {getPlayListDetail, getRelatedPlayList} from "@/network/song/song-list";
import {useRoute, useRouter} from "vue-router";
import SongListDetail from "@/components/song/SongListDetail";
import SongFanList from "@/components/song/SongFanList";
import {calString} from "@/util/cal"
import {useStore} from "vuex";

export default {
    // 歌单页面
    name: "SongList",
    setup() {
        const TAG = "SongList.vue";
        const route = useRoute();
        const store = useStore();
        const router = useRouter();
        // 歌单数据
        const listData = reactive({
            id: route.query.id,
            // 歌单名字
            listName: '',
            // 歌单图片
            coverImgUrl: '',
            // 创建人名字
            nickname: '',
            // 创建人头像
            avatarUrl: '',
            // 创建人id
            creatorId: '',
            // 创建人名称是否有特殊图标
            identityIconUrl: '',
            // 播放次数
            playCount: 0,
            // 歌单创建时间
            createTime: '',
            // 歌单标签
            tags: [],
            // 歌单介绍
            description: [],
            // 歌单包含歌曲详情,前十
            tracks: [],
            tracksMaxLenght: 10,
            // 歌单包含歌曲总数
            trackCount: 0,
            // 评论次数
            commentCount: 0,
            shareCount: 0,
            relatedPlayList: [],
            subscribers: []
        });
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            getPlayListDetail(listData.id).then(res => {
                listData.listName = res.data.playlist.name;
                listData.coverImgUrl = res.data.playlist.coverImgUrl;
                listData.nickname = res.data.playlist.creator.nickname;
                listData.avatarUrl = res.data.playlist.creator.avatarUrl;
                listData.creatorId = res.data.playlist.creator.userId;
                if (res.data.playlist.creator.avatarDetail == null) {
                    // do nothing
                } else {
                    listData.identityIconUrl = res.data.playlist.creator.avatarDetail.identityIconUrl;
                }
                listData.playCount = res.data.playlist.playCount;
                listData.createTime = new Date(parseInt(res.data.playlist.createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ');
                listData.tags = res.data.playlist.tags;
                listData.tracks = res.data.playlist.tracks;
                if (listData.tracks.length < listData.tracksMaxLenght) {
                    listData.tracksMaxLenght = listData.tracks.length;
                }
                listData.trackCount = res.data.playlist.trackCount;
                listData.commentCount = res.data.playlist.commentCount;
                listData.shareCount = res.data.playlist.shareCount;
                listData.description = res.data.playlist.description.split('\n');
                listData.subscribers = res.data.playlist.subscribers;
            })
            // 获取推荐歌单
            getRelatedPlayList(listData.id).then(res => {
                listData.relatedPlayList = res.data.playlists;
            })
            beLoading();
        }
        
        // 通知组件
        const notification = useNotification();
        // 根据ＩＤ获取歌单详情
        const getListDetail = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/playlist', query: {id}});
            }
        }
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        // 跳转到用户主页
        const getRouterToUserHome = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/user/home', query: {id}});
            }
        }
        const getRouterToPlayListByCategory = (cat) => {
            if (cat === '') {
                notification['error']({
                    content: '标签链接获取错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/discover/playlist', query: {category: cat}});
            }
        }
        onMounted(() => {
            init();
        })
        return {
            ...toRefs(listData),
            route,
            calString,
            getListDetail,
            getRouterToArtistInfo,
            getRouterToUserHome,
            getRouterToPlayListByCategory
        }
    },
    components: {
        CommentOn,
        NImage,
        PlayIcon,
        LabelItem,
        SongListDetail,
        SongFanList,
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.song-list-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    
    .left-box {
        @apply w-4/5 border bg-white;
        .list-box {
            @apply flex m-16;
            .list-img {
                @apply relative border;
                width: 200px;
                height: 200px;
                
                img {
                    @apply shadow-2xl;
                    transform: translateX(5px) translateY(5px);
                    width: 190px;
                    height: 190px;
                }
            }
            
            .list-info {
                @apply mx-8;
                .info-t {
                    @apply flex mb-4;
                    .list-style {
                        @apply p-1 text-white font-light text-sm rounded-md;
                        background: #d61c1c;
                    }
                    
                    .list-name {
                        @apply mx-4 text-xl;
                    }
                }
                
                .info-m {
                    
                    @apply my-4;
                    span {
                        color: #999999;
                    }
                    
                    .artist-name {
                        @apply ml-4 flex items-center justify-center hover:underline cursor-pointer;
                        color: #0c73c2;
                    }
                    
                    .data-create {
                        @apply flex items-center justify-center ml-4;
                    }
                }
                
                .info-b {
                    @apply my-4;
                    color: #666;
                    
                    .list-label {
                        @apply mx-2 flex;
                        .label-item {
                            @apply ml-2 flex;
                        }
                    }
                    
                    .introduce-box {
                        @apply mx-2 max-w-2xl;
                    }
                }
            }
        }
    }
    
    .right-box {
        @apply w-1/5 border bg-white;
        .rb-top {
            @apply m-4 p-2;
        }
        
        .rb-content {
            @apply m-4 p-2;
        }
    }
}

</style>